tags: iThome 鐵人賽 30天

甚麼是Component？可以想像成React的畫面是由各個Component所組成的，比如說最基礎的一頁式網頁有Header、Content、Footer三個區塊，都是由Component組合而成。

當然Component還可以分得更細，並可以重複使用！運用好的Reuse可以讓你少寫很多程式碼，讓你的網頁不像在寫文件喔~

如何寫Component呢？

讓我們先從Header開始吧！

先在/src資料夾內新增components資料夾，並在資料夾內建立Header.jsx

至於副檔名為何不是.js，其實兩者是沒有差別的，用.jsx主要是為了把React的語法給區分出來而已喔~

Component檔名

在取名方面，Component一般習慣已大寫作為開頭，原因是要與html一般的tag做為區別，且不會有所衝突。

// 引用一般tag時
<header>Header</header>

// 引用Component時，因js tag有大小寫之分，所以兩者並不相同
<Header title="Header"></Header>

基本寫法

下方程式碼是Component最基本的寫法：

import React, { Component } from 'react'

export default class Header extends Component {
  render() {
    return (
      <div>
            <h3>Header</h3>
      </div>
    )
  }
}

把寫好的Component元件引用並呈現

寫好Component了，接下來只差把它引用進去了。

打開/src/App.js入口檔案，並且把最外層div內的元素都刪除掉

/src/App.js

import './App.css';

function App() {
  return (
    <div className="App">

    </div>
  );
}

export default App;

引用Header進入App.js

下一個步驟就是把檔案引用進去了

基本寫法 import 名稱 from '相對路徑/的/檔案'

import Header from './components/Header'

並在div內使用Component

<Header></Header>

html tag都是<tag>開頭</tag>結尾，但如果裡面沒有children在內也可以寫成下方的程式碼

<Header />

最終檔案內容：

import './App.css';
import Header from './components/Header'

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  );
}

export default App;

成果

為了讓Header有所區別，所以讓我們把Header加個背景顏色

/src/App.css

* {
  margin: 0;
}

.header {
  background-color: antiquewhite;
}

並在/src/components/Header.jsx加上className

import React, { Component } from 'react'

export default class Header extends Component {
  render() {
    return (
      <div className="header">
            <h3>Header</h3>
      </div>
    )
  }
}

最終畫面就出現Header啦~ (記得用npm start把專案打開喔)

補充：

一般html為class，React為了把class區分出來 (class為javascript的關鍵字) 變為className

VS Code延伸模組讓你擁有快捷鍵：ES7+ React/Redux/React-Native snippets

安裝

側邊欄點選延伸模組 -> 搜尋ES7 -> 選擇ES7+ React/Redux/React-Native snippets -> 安裝

Component快捷鍵方式

在文件式窗內打rcc+Tab鍵就會自動幫你生成好預設的Component寫法囉，很方便吧~

快捷鍵觸發：

自動生成的樣式：

後記

基本的Component建立教學就這樣啦~明天開始來介紹一下Component中的props與state吧~

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)